<template>
  <div>
    <el-table
      :data="paramList"
      style="width: 100%"
    >
      <el-table-column

        :label="$t('name')"
      >
        <template slot-scope="scope">
          <el-autocomplete
            v-model="scope.row.name"
            :disabled="scope.row.paramId"
            :fetch-suggestions="nameSearch"
            @select="nameChange"
          />
        </template>
      </el-table-column>
      <el-table-column

        :label="$t('value')"
      >
        <template slot-scope="scope">
          <el-autocomplete
            v-model="scope.row.value"
            :disabled="scope.row.paramId"
            :fetch-suggestions="valueSearch"
            @select="valueChange"
          />
        </template>
      </el-table-column>
      <el-table-column

        width="180"
      >
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" style="float: right" @click="addParam">{{ $t('add') }}</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            :disabled="scope.row.paramId"
            type="text"
            icon="el-icon-edit"
            @click="addOrUpdateParameter(scope.row)"
          >{{ $t('save') }}</el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="delParameter(scope.row)"
          >{{ $t('delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  failureNotice,
  successNotice
} from '@/util/common'
import {
  deleteDeviceSettingParam,
  listDeviceSettingParam,
  updateDeviceSettingParam,
  insertDeviceSettingParam
} from '@/api/iot/iotDeviceSettingParamApi'
import {
  listProductTemplateSettingParam
} from '@/api/iot/iotProductTemplateSettingParamApi'
export default {
  name: 'Param',
  props: {
    setting: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      paramList: [],
      nameList: [],
      valueList: []
    }
  },
  watch: {
    setting: {
      deep: true,
      handler(val) {
        if (this.setting.settingId) {
          this.listDeviceSettingParam()
        }
      }
    }
  },
  created() {
    if (this.setting.settingId) {
      this.listDeviceSettingParam()
    }
  },
  methods: {
    nameChange(item) {
      for (const i in this.nameList) {
        if (this.nameList[i].value === item.value) {
          for (const j in this.paramList) {
            if (this.paramList[j].name === item.value) {
              const temp = this.paramList[j]
              temp.value = this.valueList[i].value
              this.paramList.splice(j, 1, temp)
              break
            }
          }
          break
        }
      }
    },
    valueChange(item) {
      for (const i in this.valueList) {
        if (this.valueList[i].value === item.value) {
          for (const j in this.paramList) {
            if (this.paramList[j].value === item.value) {
              const temp = this.paramList[j]
              temp.name = this.nameList[i].value
              this.paramList.splice(j, 1, temp)
              break
            }
          }
          break
        }
      }
    },
    nameSearch(queryString, cb) {
      cb(this.nameList)
    },
    valueSearch(queryString, cb) {
      cb(this.valueList)
    },
    listProductTemplateSettingParam() {
      listProductTemplateSettingParam({
        settingId: this.setting.settingId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const nameList = []
          const valueList = []
          data.forEach(item => {
            let have = false
            for (const i in this.paramList) {
              if (this.paramList[i].value === item.value) {
                have = true
                break
              }
            }
            if (!have) {
              nameList.push({ value: item.name })
              valueList.push({ value: item.value })
            }
          })
          this.nameList = nameList
          this.valueList = valueList
        } else {
          this.nameList = []
          this.valueList = []
        }
      })
    },
    addOrUpdateParameter(item) {
      if (item.value == null || item.value === '') {
        failureNotice(this, this.$t('value'))
        return
      }
      if (item.name == null || item.name === '') {
        failureNotice(this, this.$t('name'))
        return
      }
      const json = {
        settingId: this.setting.settingId,
        deviceCore: this.deviceCore,
        value: item.value,
        name: item.name
      }
      if (item.isAdd) {
        insertDeviceSettingParam(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listDeviceSettingParam(this.setting)
        })
      } else {
        json.paramId = item.paramId
        updateDeviceSettingParam(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listDeviceSettingParam(this.setting)
        })
      }
    },
    delParameter(item) {
      deleteDeviceSettingParam({
        paramId: item.paramId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.listDeviceSettingParam(this.setting)
        }
      })
    },
    listDeviceSettingParam() {
      listDeviceSettingParam({
        settingId: this.setting.settingId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.paramList = data
        } else if (code === '201') {
          this.paramList = []
        }
        this.listProductTemplateSettingParam()
      })
    },
    addParam() {
      for (let i = 0, j = this.paramList.length; i < j; i++) {
        if (this.paramList[i].isAdd) {
          return
        }
      }
      const item = {
        value: '',
        name: '',
        isAdd: true
      }
      this.paramList.push(item)
    }
  }
}
</script>

